import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Comment, List, Pagination } from 'antd';
import moment from 'moment';
import {
  CustomerServiceOutlined,
  PlayCircleFilled
} from '@ant-design/icons';
// import ExampleComment from './hookget'
import { getMvUrl, getSimiMv, getMvDetailMvid, getCommentMvId, getSimiMvMvid } from '../../api/mvId'
import './mv.less';

// const ExampleComment = ({ children }) => (
//   <Comment
//     actions={[<span key="comment-nested-reply-to">Reply to</span>]}
//     author={<a>Han Solo</a>}
//     avatar={
//       <Avatar
//         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
//         alt="Han Solo"
//       />
//     }
//     content={
//       <p>
//         We supply a series of design principles, practical patterns and high quality design
//         resources (Sketch and Axure).
//       </p>
//     }
//   >
//     {children}
//   </Comment>
// );



// const data = [
//   {
//     actions: [<span key="comment-list-reply-to-0">Reply to</span>],
//     author: 'Han Solo',
//     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//     content: (
//       <p>
//         We supply a series of design principles, practical patterns and high quality design
//         resources (Sketch and Axure), to help people create their product prototypes beautifully and
//         efficiently.
//       </p>
//     ),
//     datetime: (
//       <Tooltip
//         title={moment()
//           .subtract(1, 'days')
//           .format('YYYY-MM-DD HH:mm:ss')}
//       >
//         <span>
//           {moment()
//             .subtract(1, 'days')
//             .fromNow()}
//         </span>
//       </Tooltip>
//     ),
//   },
//   {
//     actions: [<span key="comment-list-reply-to-0">Reply to</span>],
//     author: 'Han Solo',
//     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//     content: (
//       <p>
//         We supply a series of design principles, practical patterns and high quality design
//         resources (Sketch and Axure), to help people create their product prototypes beautifully and
//         efficiently.
//       </p>
//     ),
//     datetime: (
//       // <Tooltip
//       //   title={moment()
//       //     .subtract(2, 'days')
//       //     .format('YYYY-MM-DD HH:mm:ss')}
//       // >
//       //   <span>
//       //     {moment()
//       //       .subtract(2, 'days')
//       //       .fromNow()}
//       //   </span>
//       // </Tooltip>
//       <span>{moment()
//         .subtract(2, 'days')
//         .format('YYYY-MM-DD HH:mm:ss')}</span>
//     ),
//   },
// ];


class index extends Component {

  constructor() {
    super()
    // console.log(this.props)
    this.state = {
      // mv 的地址
      mvUrl: '',
      // mv 的推荐视频
      mvs: [],
      // 评论数据等
      data: {},
      // 页面上显示的数据
      datas: [],
      // 评论的总数
      total: 0,
      // 当前页数
      current: 1
    }
  }

  componentDidMount() {
    this.getThreeFun(this.props.match.params.id)
    this.getGetCommentMvId(this.props.match.params.id)
    this.getSimiMvMvidData(this.props.match.params.id)
  }

  // 调用该函数获取 mv、mv数据、歌手等等
  getThreeFun(id) {
    let p1 = new Promise(async function (res, rej) {
      let { data } = await getMvUrl(id)
      if (data.code === 200) return res(data)
      rej(data)
    })
    let p2 = new Promise(async function (res, rej) {
      let { data } = await getSimiMv(id)
      if (data.code === 200) return res(data)
      rej(data)
    })
    let p3 = new Promise(async function (res, rej) {
      let { data } = await getMvDetailMvid(id)
      if (data.code === 200) return res(data)
      rej(data)
    })

    Promise.all([p1, p2, p3]).then(res => {
      this.setState({
        mvUrl: res[0].data.url,
        mvs: res[1].mvs,
        data: res[2].data
      })
    })

    // console.log(this.state)
  }

  // 调用该函数获取评论数据
  async getGetCommentMvId(id, limit = 5, offset = 0) {
    const { data } = await getCommentMvId(id, limit, offset)
    // console.log(data)
    // this.state.datas.push()
    let datas = [];
    data.comments.forEach(element => {
      datas.push({
        // actions: [<span key="comment-list-reply-to-0">Reply to</span>],
        author: 'Han Solo',
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        content: (
          <p>
            {element.content}
          </p>
        ),
        datetime: (moment(element.time)
          .subtract()
          .format('YYYY-MM-DD HH:mm:ss')
        ),
      })
    });

    this.setState({
      datas: datas,
      total: data.total
    })
    // console.log(this.state)
  }

  async getSimiMvMvidData(id) {
    const { data } = await getSimiMvMvid(id)
    this.setState({
      mvs: data.mvs
    })
    console.log(this.state.mvs)

  }

  // 点击分页按钮时触发该函数，重新获取数据并修改分页按钮的显示
  Changesen(page, pageSize) {
    // console.log({ page, pageSize })
    this.getGetCommentMvId(this.props.match.params.id, 5, (page - 1) * 5)
    this.setState({
      current: page
    })
  }

  // 触发该事件重新调用获取数据并渲染
  lickItemId = (id) => {
    this.props.history.replace(`/mv/${id}`)
    this.getThreeFun(this.props.match.params.id)
    this.getGetCommentMvId(this.props.match.params.id)
    this.getSimiMvMvidData(this.props.match.params.id)
  }

  render() {
    return (
      <div className="mv-container">
        <div className="mv-wrap">
          <div className="mv-video">
            <h3 className="title">mv详情</h3>
            <div className="video-wrap">
              <video controls src={this.state.mvUrl}></video>
            </div>
          </div>

          <div className="info-wrap">
            <div className="singer-info">
              <div className="avatar-wrap">
                <img src={this.state.data.cover} alt="" />
              </div>
              <span className="name">{this.state.data.artistName}</span>
            </div>

            <div className="mv-info">
              <h2>{this.state.data.name}</h2>
              <span className="date">发布：{this.state.data.publishTime}</span>
              <span className="number">播放：{this.state.data.playCount / 10000}万次</span>
              <p className="desc">{this.state.data.desc}</p>
            </div>


          </div>

          <div className="comment">
            <List
              className="comment-list"
              header={`热门评论（${this.state.datas.length}）`}
              itemLayout="horizontal"
              dataSource={this.state.datas}
              renderItem={item => (
                <li>
                  <Comment
                    // actions={item.actions}
                    author={item.author}
                    avatar={item.avatar}
                    content={item.content}
                    datetime={item.datetime}
                  >
                    {/* <ExampleComment></ExampleComment> */}
                  </Comment>
                </li>
              )}
            />
            <Pagination defaultCurrent={this.state.datas.length} total={this.state.total} current={this.state.current} onChange={this.Changesen.bind(this)} />
          </div>

        </div>
        <div className="mv-recommend">
          <div className="mv-comment">
            <h3 className="title">相关推荐</h3>
            <div className="mvs">
              <div className="items">
                {
                  this.state.mvs.map(value => {
                    return <div className="mv-item" key={value.id} onClick={this.lickItemId.bind(this, value.id)}>
                      <div className="mv-img-wrap">
                        <img src={value.cover} alt="" className="mv-img"/>
                        <span className="icon-font">
                          <PlayCircleFilled />
                        </span>
                        <div className="num-wrap">
                          <CustomerServiceOutlined className="num-icon" />
                          <div className="num">{value.playCount}</div>
                        </div>
                        {/* <span className="mv-time">{(value.duration / 1000) / 60}</span> */}
                      </div>
                      <div className="mv-info-wrap">
                        <div className="mv-tow">
                          <div className="name">{value.name}</div>
                          <div className="singer">{value.artistName}</div>
                        </div>

                      </div>
                    </div>

                  })
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


export default withRouter(index)